<template>
  <el-row :gutter="10">
    <el-col class="right-main pain" :lg="24">
      <p class="where">
        当前位置:
        <span>首页 > 图书阅读</span>
      </p>
      <template>
        <el-tabs v-model="activeName">
          <el-tab-pane label="全部图书" name="first">
            <el-row class="list">
              <el-col :span="17" class="list-li">
                <el-row class="content">
                  <el-col :span="24">
                    <p class="name">《夏日终曲》</p>
                    <template>
                      <!-- <pdf :src="src"></pdf> -->
                    </template>
                    <img :src="fm" alt class="fm" />
                    <p class="icon">
                      <el-row>
                        <el-col :span="4" :offset="12">
                          <img :src="collection" alt />收藏
                        </el-col>
                        <el-col :span="4">
                          <img :src="liulan" alt />1000
                        </el-col>
                        <el-col :span="4">
                          <img :src="pinglun" alt />200
                        </el-col>
                      </el-row>
                    </p>
                  </el-col>
                  <el-col :span="24" class="comments">
                    <el-row>
                      <el-input
                        type="textarea"
                        :rows="4"
                        placeholder="文明发言，抵制低俗"
                        v-model="textarea"
                      ></el-input>
                      <el-col :span="4" :offset="20" align="right" style="padding-top:25px">
                        <el-button>发表评论</el-button>
                      </el-col>
                    </el-row>
                    <el-row class="all">
                      <template>
                        <div>
                          <span>全部评论</span>
                          <el-divider></el-divider>
                        </div>
                      </template>
                      <el-col :span="24">
                        <!-- 评论列表 -->
                        <el-row class="pl-list">
                          <el-col :span="2">
                            <el-avatar icon="el-icon-user-solid"></el-avatar>
                          </el-col>
                          <el-col :span="19">
                            <p>
                              <span class="person">口吐芬芳第一人</span> 2小时前
                            </p>
                            <p>故事很感人，期待后续。。。。</p>
                            <el-row>
                              <el-col :span="20" :offset="1">
                                <p>
                                  <span class="person">口吐芬芳第一人</span>故事很感人，期待后续。。。。
                                </p>
                              </el-col>
                              <el-col :span="3">
                                <el-button @click="hf">回复</el-button>
                              </el-col>
                            </el-row>
                          </el-col>
                          <el-col :span="3" align="right">
                            <el-button @click="hf">回复</el-button>
                          </el-col>
                          <transition name="el-fade-in-linear">
                            <el-col :span="24" v-show="response">
                              <el-input type="textarea" :rows="2" placeholder="回复某某" v-model="msg"></el-input>
                              <el-col :span="4" :offset="20" align="right" style="padding-top:25px">
                                <el-button @click="qd">确定</el-button>
                              </el-col>
                            </el-col>
                          </transition>
                        </el-row>
                        <el-row class="more" v-if="more==false" @click.native="showMore">
                          查看更多评论
                          <i class="el-icon-arrow-down"></i>
                        </el-row>
                        <el-row class="more-total" v-else align="center">
                          <el-pagination background layout="prev, pager, next" :total="100"></el-pagination>
                        </el-row>
                      </el-col>
                    </el-row>
                  </el-col>
                </el-row>
              </el-col>
              <el-col :span="6" :offset="1" class="right-box">
                <el-row>
                  <div class="new-title">
                    <span>资源信息</span>
                  </div>
                  <div class="pan">
                    <p>作者：周子昂</p>
                    <p>
                      分类：
                      <el-button round>文学</el-button>
                    </p>
                    <p>出版单位：不详</p>
                    <p>文件大小：10kb</p>
                    <p>上传时间：2020-01-01 20:30:10</p>
                  </div>
                </el-row>
                <el-row>
                  <div class="new-title">
                    <span>资源简介</span>
                  </div>
                  <div class="pan">
                    <el-row>
                      <el-col :span="8">
                        <img :src="fms" alt />
                      </el-col>
                      <el-col :span="16">
                        <p>《夏日终曲》</p>
                        <p class="pf">
                          <span>评分：</span>
                          <el-rate
                            v-model="value"
                            disabled
                            show-score
                            text-color="#ff9900"
                            score-template="{value}"
                          ></el-rate>
                        </p>
                        <p class="introduce">
                          <span>简介：</span>十七岁的爱情以 身伺火，三十七岁时...十七岁的爱情以 身伺火，三十七岁时...
                        </p>
                      </el-col>
                    </el-row>
                  </div>
                </el-row>
                <el-row>
                  <div class="new-title">
                    <span>相关资源</span>
                  </div>
                  <div class="pan">
                    <el-collapse v-model="active" accordion>
                      <el-collapse-item name="1">
                        <template slot="title">
                          <el-tag type="warning" effect="dark">1</el-tag>《碧血雨花飞：郭纲琳》
                        </template>
                        <div>
                          <el-row>
                            <el-col :span="8" :offset="2">
                              <img :src="fms" alt />
                            </el-col>
                            <el-col :span="14">
                              <p>《夏日终曲》</p>
                              <p class="pf">
                                <span>评分：</span>
                                <el-rate
                                  v-model="value"
                                  disabled
                                  show-score
                                  text-color="#ff9900"
                                  score-template="{value}"
                                ></el-rate>
                              </p>
                              <el-button round>政治法律</el-button>
                            </el-col>
                          </el-row>
                        </div>
                      </el-collapse-item>
                      <el-collapse-item name="2">
                        <template slot="title">
                          <el-tag type="success" effect="dark">2</el-tag>《碧血雨花飞：郭纲琳》
                        </template>
                        <div>
                          <el-row>
                            <el-col :span="8" :offset="2">
                              <img :src="fms" alt />
                            </el-col>
                            <el-col :span="14">
                              <p>《夏日终曲》</p>
                              <p class="pf">
                                <span>评分：</span>
                                <el-rate
                                  v-model="value"
                                  disabled
                                  show-score
                                  text-color="#ff9900"
                                  score-template="{value}"
                                ></el-rate>
                              </p>
                              <el-button round>政治法律</el-button>
                            </el-col>
                          </el-row>
                        </div>
                      </el-collapse-item>
                      <el-collapse-item name="3">
                        <template slot="title">
                          <el-tag type="success" effect="dark">3</el-tag>《碧血雨花飞：郭纲琳》
                        </template>
                        <div>
                          <el-row>
                            <el-col :span="8" :offset="2">
                              <img :src="fms" alt />
                            </el-col>
                            <el-col :span="14">
                              <p>《夏日终曲》</p>
                              <p class="pf">
                                <span>评分：</span>
                                <el-rate
                                  v-model="value"
                                  disabled
                                  show-score
                                  text-color="#ff9900"
                                  score-template="{value}"
                                ></el-rate>
                              </p>
                              <el-button round>政治法律</el-button>
                            </el-col>
                          </el-row>
                        </div>
                      </el-collapse-item>
                    </el-collapse>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </template>
    </el-col>
  </el-row>
</template>
<script>
import store from "../../store";
import pdf from "vue-pdf";
export default {
  name: "cont",
  components: {
    pdf,
  },
  props: {
    // title: String,
    // option: Array,
    // formData: Object,
    // isEdit: {
    //   type: Boolean,
    //   default: false,
    // },
  },
  computed: {
    classOption() {
      return {
        singleHeight: 57,
        waitTime: 2000,
        step: 0.5,
        hoverStop: false,
      };
    },
  },
  data() {
    return {
      src: "@/assets/read.pdf",
      value: 5,
      fm: require("@/assets/index/pdf.png"),
      fms: require("@/assets/index/fengmian_s.png"),
      collection: require("@/assets/index/collection.png"),
      liulan: require("@/assets/index/liulan.png"),
      pinglun: require("@/assets/index/pinglun.png"),
      activeName: "first",
      list: [
        { name: "哲学、宗教" },
        { name: "哲学、宗教" },
        { name: "哲学、宗教" },
        { name: "哲学、宗教" },
      ],
      prizeList: [
        { name: "城轨采购网", src: "http://www.railunique.com" },
        { name: "天津地铁电子采购平台", src: "http://www.railunique.com" },
        { name: "南昌地铁", src: "http://www.railunique.com" },
        { name: "南昌地铁", src: "http://www.railunique.com" },
        { name: "兰州地铁招标信息", src: "http://www.railunique.com" },
        { name: "西安公共资源交易中心", src: "http://www.railunique.com" },
      ],
      activeIndex: 0,
      intnum: undefined,
      active: "1",
      textarea: "",
      response: false,
      msg: "",
      more: false,
    };
  },
  computed: {
    top() {
      return -this.activeIndex * 20 + "px";
    },
  },
  methods: {
    select(index) {
      this.active = index;
    },
    hf() {
      this.response = true;
    },
    qd() {
      this.response = false;
    },
    showMore() {
      this.more = true;
      console.log(this.more);
    },
  },
};
</script>
<style lang="scss" scoped>
.right-main {
  position: relative;
  padding-left: 25px !important;
}
.fm {
  width: 100%;
}
.content {
  padding: 20px;
  text-align: center;
  border: 1px solid rgba(222, 222, 222, 1);
  border-radius: 10px;
}
.title {
  font-size: 26px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(255, 255, 255, 1);
  text-align: left;
}
.news {
  padding: 30px 0;
}
.where {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(142, 142, 142, 1);
}
.tab {
  text-align: right;
  margin-top: 0px;
  border-right: 1px solid #e4e4e4;
  li {
    display: inline-block;
    padding: 12px 30px;
    border-left: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(79, 79, 79, 1);
    cursor: pointer;
  }
  li:hover {
    color: #1ca2a7 !important;
  }
  .active {
    color: #1ca2a7 !important;
    border-bottom: 0px solid #ddd;
  }
}
.point {
  span {
    float: left;
  }
}
.info {
  position: relative;
  > span {
    position: absolute;
    left: 0;
    top: 6px;
  }
}
.name {
  font-size: 24px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(22, 22, 22, 1);
  margin-top: 0;
}
.icon {
  padding-top: 40px;
}
.list {
  padding-top: 30px;
  img {
    margin-left: 0;
  }
}
.list-li {
  padding-bottom: 30px;
}
.icon {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(142, 142, 142, 1);
  img {
    margin-right: 10px;
  }
}
.new-title {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(37, 37, 37, 1);
  border-bottom: 2px solid #e4e4e4;
  span {
    display: inline-block;
    position: relative;
    padding-bottom: 14px;
  }
  span::after {
    display: inline-block;
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    background-color: #1ba1a7;
    width: 96px;
    height: 2px;
  }
}
.pan {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(219, 219, 219, 1);
  box-shadow: 0px 2px 10px 0px rgba(153, 153, 153, 0.23);
  border-radius: 10px;
  margin: 20px 0;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(79, 79, 79, 1);
  padding: 20px;
  p {
    padding: 8px 0;
    margin: 0;
  }
}
.pf {
  span {
    float: left;
    color: #8d8d8d;
  }
}
.introduce {
  span {
    color: #8d8d8d;
  }
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0 !important;
}
.comments {
  padding: 30px;
  margin: 30px 0;
  background: rgba(249, 249, 249, 1);
  border-radius: 10px;
}
.all {
  text-align: left;
  p {
    margin: 0;
    padding-bottom: 15px;
  }
}
.person {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(27, 161, 167, 1);
  display: inline-block;
  padding-right: 20px;
}
.more {
  text-align: center;
  cursor: pointer;
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(37, 37, 37, 1);
  padding: 20px 0 0 0;
}
.pl-list {
  border-bottom: 1px solid rgba(235, 235, 235, 1);
  padding-bottom: 16px;
}
.more-total{
  text-align: center;
  padding: 100px 0 20px 0;
}
</style>
<style lang="scss">
.pain .el-tabs__item.is-active {
  font-size: 22px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(37, 37, 37, 1);
}
.pain .el-tabs__active-bar {
  background-color: #1ca2a7;
}
.pain .el-tabs__item {
  height: 50px;
  line-height: normal;
}
.pain .el-tabs__header {
  margin: 0;
}
.info .el-button {
  border: none;
  padding: 0;
  width: 100%;
  line-height: 30px;
  white-space: normal;
  text-align: left;
  text-indent: 45px;
  span {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: 20px;
    color: #4f4f4f;
  }
}
.info {
  .el-button:hover {
    background: none;
  }
}
.el-collapse {
  border: none;
}
.el-collapse-item__header {
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(21, 21, 21, 1);
}
.right-box .el-button, .all .el-button,.comments .el-button{
  background: rgba(27, 161, 167, 1);
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
  color: rgba(255, 255, 255, 1);
}
</style>